<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Expert</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
    <div class="layui-row" style="border: cadetblue 1px solid;padding: 20px;margin-top: 30px">
        <h1>专家一览</h1>
        <table id="demo" lay-filter="expertTable"></table>

        <div class="layui-col-md3" style="border: cadetblue 1px solid;padding: 20px">
            <input type="text" name="title" required lay-verify="required" id="expertName" placeholder="专家名称"
                   autocomplete="off" class="layui-input">
            <br>
            <input type="text" name="title" required lay-verify="required" id="company" placeholder="公司"
                   autocomplete="off" class="layui-input">
            <br>
            <input type="text" name="title" required lay-verify="required" id="strong" placeholder="专长领域"
                   autocomplete="off" class="layui-input">
            <br>
            <button class="layui-btn" type="button" id="Find">查询</button>

            <button class="layui-btn layui-bg-orange" type="button" id="buttonAdd">添加新的专家信息</button>
        </div>
    </div>
</div>


<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="alt">修改专家信息</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delete">删除此专家</a>
</script>
<script>
    layui.use('table', function () {
        let $ = layui.$;
        let layer = layui.layer;
        let table = layui.table;
        //第一个实例
        let show = table.render({
            elem: '#demo'
            , url: '/Trees/expert' //数据接口
            , page: true //开启分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "count": res.total, //解析数据长度
                    "data": res.list
                };
            }
            , cols: [[ //表头
                {field: 'pkId', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'name', title: '姓名'}
                , {field: 'company', title: '工作单位'}
                , {field: 'strong', title: '专长'}
                , {field: 'job', title: '职位'}
                , {field: 'tel', title: '电话'}
                , {fixed: 'right', align: 'center', width: '300', toolbar: '#barDemo'}
            ]]
        });
        $('#Find').on('click', function () {
            show.reload({
                where: {
                    company: $('#company').val(),
                    expertName: $('#expertName').val(),
                    strong: $('#strong').val()
                }
                , page: {
                    curr: 1
                }
            })
        })

        $('#buttonAdd').on('click', function () {
            let a, b, c, d, e, f;
            layer.open({
                type: 2
                , content: "/Trees/LayUiBac/home/expert/Jump/addExpert.html"//填一个url地址
                , area: ['600px', '600px']
                , shade: ['0.9', '#393D49']
                , anim: 0
                , maxmin: true
                , btn: ["确认提交"]
                , yes: function (index, layero) {
                    let body = layer.getChildFrame('body', index);
                    let expertName = body.find("input[name=expertName]").val();
                    let company = body.find("input[name=company]").val();
                    let strong = body.find("input[name=strong]").val();
                    let job = body.find("input[name=job]").val();
                    let tel = body.find("input[name=tel]").val();
                    let sex = body.find("input[name=sex]").val();
                    let birthday = body.find("input[name=birthday]").val();
                    let email = body.find("input[name=email]").val();
                    let address = body.find("input[name=address]").val();
                    let strs = "&expertName=" + expertName + "&company=" + company + "&strong=" + strong + "&job=" + job + "&tel=" + tel + "&sex=" + sex + "&birthday=" + birthday + "&email=" + email + "&address=" + address + "&="
                    $.ajax({
                        type: "post",
                        url: "/Trees/expert?method=add" + strs
                    })

                    layer.close(index);
                    show.reload();
                }
                , success: function (layero, index) {

                }

            })
        })


        table.on('tool(expertTable)', function (obj) {
            let data = obj.data;
            console.log(data)
            let layEvent = obj.event;
            let tr = obj.tr;

            if (layEvent === "detail") {
                layer.open({
                    type: 2
                    , content: "/Trees/LayUiBac/home/expert/Jump/showExpert.html"//填一个url地址
                    , area: ['600px', '600px']
                    , shade: ['0.9', '#393D49']
                    , anim: 0
                    , maxmin: true
                    , btn: ["返回主菜单"]
                    , yes: function (index, layero) {
                        // let body = layer.getChildFrame('body',index);
                        layer.close(index);
                    }
                    , success: function (layero, index) {
                        let body = layer.getChildFrame('body', index);
                        body.find("input[name=expertName]").val(data.name);
                        body.find("input[name=company]").val(data.company);
                        body.find("input[name=strong]").val(data.strong);
                        body.find("input[name=job]").val(data.job);
                        body.find("input[name=tel]").val(data.tel);
                        body.find("input[name=sex]").val(data.sex);
                        body.find("input[name=birthday]").val(data.birthday);
                        body.find("input[name=email]").val(data.email);
                        body.find("input[name=address]").val(data.address);
                    }
                })
            } else if (layEvent === "alt") {
                layer.open({
                    type: 2
                    , content: "/Trees/LayUiBac/home/expert/Jump/showExpert.html"//填一个url地址
                    , area: ['600px', '600px']
                    , shade: ['0.9', '#393D49']
                    , anim: 0
                    , maxmin: true
                    , btn: ["确认修改"]
                    , yes: function (index, layero) {
                        let body = layer.getChildFrame('body', index);
                        let tel = body.find("input[name=tel]").val();
                        let job = body.find("input[name=job]").val();
                        let company = body.find("input[name=company]").val();
                        let email = body.find("input[name=email]").val();
                        let strs = "&tel=" + tel + "&job=" + job + "&company=" + company + "&email=" + email + "&pkId=" + data.pkId
                        $.ajax({
                            type: "post",
                            url: "/Trees/expert?method=alt" + strs
                        })

                        show.reload();
                        layer.close(index);
                    }
                    , success: function (layero, index) {
                        let body = layer.getChildFrame('body', index);
                        body.find("input[name=expertName]").val(data.name);
                        body.find("input[name=company]").val(data.company);
                        body.find("input[name=strong]").val(data.strong);
                        body.find("input[name=job]").val(data.job);
                        body.find("input[name=tel]").val(data.tel);
                        body.find("input[name=sex]").val(data.sex);
                        body.find("input[name=birthday]").val(data.birthday);
                        body.find("input[name=email]").val(data.email);
                        body.find("input[name=address]").val(data.address);
                    }
                })
            } else if (layEvent === "delete") {
                $.ajax({
                    type: "post",
                    url: '/Trees/expert?method=delete' + "&pkId=" + data.pkId
                })
                show.reload();
                // layer.close(index);
            }
        })

    });

</script>

</body>
</html>